<template>


	
		<view class="wrapper">
			<view class="fill_header">
				<view class="fill_header_title">
					头像
				</view>

				<view class="fill_header_cont" @click="openImg">
					<view class="photo_img_cont">
						<image :src="form.headpic" mode="" class="photo_img" v-if="form.headpic"></image>
						<image src="../../static/missing-face.png" mode="" class="photo_img" v-else>
					</view>
				</view>
			</view>
			<view class="cont">


				<view class="fill_info_line">
					<view class="fill_info_title">
						姓名
					</view>
					<view class="fill_info_another">
						<input class="resultblack" placeholder="请输入姓名" v-model="form.user_name" />
					</view>
				</view>


				<view class="fill_info_line">
					<view class="fill_info_title">
						手机
					</view>
					<view class="fill_info_another result">
						{{form.mobile || '联系客服设置'}}
					</view>
				</view>

				<view class="fill_info_line">
					<view class="fill_info_title">
						地区
					</view>
					<view class="fill_info_another checkbox_line">
						<view class="resultblack" @click="toggleTab">{{resultInfo || '请选择地区'}}</view>
						<wpicker mode="region" @confirm="onConfirm" ref="region">

						</wpicker>
					</view>
				</view>


			</view>
			<view class="submit_btn_cont">
				<button class="submit_btn" @click="set">修改</button>
			</view>
		</view>



</template>

<script>
	import uniIcon from "@/components/uni/uni-icon/uni-icon.vue"
	import wpicker from "@/components/w-picker/w-picker.vue"
	import {
		CUser
	} from '@/common/cache/user.js';
	var cache_user = new CUser();


	export default {
		components: {

			uniIcon,
			wpicker
		},
		data() {
			return {

				form: {
					headpic: '',
					user_name: '',
					mobile: '',
					area: ''
				},
				resultInfo:''
			}
		},
		onLoad(options) {
			this.loaduser()
		},

		mounted() {

		},


		methods: {
			set() {
				this.$api.http.post('/assistance/index/setUserInfo', this.form).then(res => {
					
					this.$api.msg(res.msg)
					
					if(res.status ==200){
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
						
					}
				

				})

			},
			loaduser() {
				cache_user.userinfo().then(res => {
					//	 console.log('usershow',res)
					this.form = res;
					this.resultInfo = res.uArea
				});
			},


			//接收方法
			onConfirm(val) {

				this.form.area = val.result;
				this.resultInfo =val.result
				//console.log('form', this.form)

			},
			toggleTab() {
				this.$refs['region'].show();
			},

			//switch
			switchChange(e) {
				let statusTip = e.detail.value ? '打开' : '关闭';
				this.$api.msg(`${statusTip}消息推送`);
			},


			openImg() {
				this.$api.msg('请前往"我的"，点击头像进行更改头像');
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			this._load();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		}
	}
</script>

<style lang="scss">
	.clearfix {
		zoom: 1;
		display: block;
	}

	.noShow {
		display: none;
	}

	.clearfix:after {
		content: ".";
		visibility: hidden;
		display: block;
		height: 0;
		clear: both;
	}

	

		.wrapper {
			color: $color-theme;
			background-color: $bg-gap;
			height: 100vh;
			padding: 20upx;
			.fill_header {
				border-radius: 5upx;
				background-color: $bg-theme;
				padding: 40upx;
				margin-bottom: 20upx;

				.fill_header_title {
					font-size: 26upx;
				}

				.fill_header_cont {
					margin-top: 30upx;

					.photo_img_cont {
						border: 1upx solid hsla(0, 0%, 60%, .3);
						width: 120upx;
						height: 120upx;
						padding: 20upx;

						.photo_img {
							width: 80upx;
							height: 80upx;
						}
					}
				}
			}

			.cont {
				border-radius: 5upx;
				background-color: $bg-theme;
				padding: 40upx;

				.fill_info_line {
					margin-top: 30upx;

					.fill_info_title {
						font-size: 26upx;
					}

					.fill_info_cont {
						position: relative;
						border-bottom: 1upx solid hsla(0, 0%, 60%, .3);

						.pwdInput {
							font-size: 26upx;
							height: 80upx;
							line-height: 80upx;
							border: none;
							display: block;
							outline: none;
						}

						.pwd_icon {
							width: 85upx;
							height: 85upx;
							-webkit-transform: scale(.4);
							transform: scale(.4);
							position: absolute;
							top: 0;
							right: 0;
						}
					}

					.fill_info_another {
						border-bottom: 1upx solid hsla(0, 0%, 60%, .3);
						margin-top: 24upx;
						;

						label {
							font-size: 14upx;
						}
					}

					.checkbox_line {
						padding: 0 0px 14px;

						.uni-input {
							text-indent: 0;
							background: #FFFFFF;
						}
					}
				}

				.fill_info_line:first-child {
					margin-top: 0;
				}
			}
		}

		.submit_btn_cont {
			margin-top: 20upx;

			.submit_btn {
				border-radius: 5upx;
				color: #FFFFFF;
				font-size: 26upx;
				background: linear-gradient(90deg, #4e8cff, #2f79ff);
			}
		}
	


	.result {
		color: #999999;
		margin-right: 5%;
		width: 100%;
		font-size: 32upx;
	}

	.resultblack {
		color: $text-color;
		margin-right: 5%;
		width: 100%;
		font-size: 32upx;
	}
</style>
